<template>
  <a-modal
      :bodyStyle="{ height: '400px' }"
      :destroyOnClose="true"
      :footer="null"
      :visible="visible"
      :width="600"
      title="审批配置"
      @cancel="closeModal"
  >
    <div class="content">
      <div class="top">
        <div
            v-for="(item, index) in settingTypes"
            :key="index"
            :class="activeKey === item.key ? 'active' : ''"
            class="type-item"
            @click.stop="changeKey(item.key)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="bottom">
        <!--  调整金审批   -->
        <template v-if="activeKey === 'adjust_approve'">
          <div class="listapproves">
            <div>
              账单金额调整审批
              <TextTip :tips="[
              `1.当开启审核，则会在该机构的审批应用中创建一个内置的”调整金审批“`,
              '2.只有开启了审批，调整才会进入审批流程。', ]"
              />
            </div>
            <div class="switchbut">
              <a-switch
                  v-model:checked="adjustApprove"
                  :checkedValue="1"
                  :unCheckedValue="0"
                  checked-children="开启"
                  un-checked-children="关闭"
                  @change="(val) => handleAdjustApproveChange(val)"
              />
            </div>
          </div>
          <div class="listapproves">
            <div>
              修改日期审批 <TextTip :tips="['1.只有开启了审批，日期调整才会进入审批流程。']"/>
            </div>
            <div class="switchbut">
              <a-switch
                  v-model:checked="billDateApprove"
                  :checkedValue="1"
                  :unCheckedValue="0"
                  checked-children="开启"
                  un-checked-children="关闭"
                  @change="(val) => handleDateApproveChange(val)"
              />
            </div>
          </div>
        </template>
      </div>
    </div>

  </a-modal>
</template>

<script>
import {message} from "ant-design-vue";
import {computed, defineComponent, reactive, toRefs, watch,} from "vue";
import request from "@/common/utils/request";
import {TextTip} from "bl-common-vue3";
import store from "@/store";
import {useRouter} from "vue-router";
import { SendOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "BillApprovalSetting",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {TextTip,SendOutlined},
  setup(props, context) {
    const $router = useRouter();
    const state = reactive({
      settingTypes: [
        {
          name: "账单审批",
          key: "adjust_approve",
        }
      ],
      activeKey: "adjust_approve",
      adjustApprove: 0,
      billDateApprove: 0,
    });

    const changeKey = (key) => {
      state.activeKey = key;
    };
    const haveInvoiceAuth = computed(() =>
        store.getters.menuList.find((v) => v.alias === "InvoiceSetting")
    );

    const closeModal = () => {
      context.emit("closeModal");
    };

    const handleAdjustApproveChange = (val) => {
      request
          .put("/org", "/bill/approvalSet", {
            type: "adjust_approve",
            is_use: val,
          })
          .then((res) => {
            message.success(res.msg || "修改成功！");
            init();
          });
    };
    const handleDateApproveChange = (val) => {
      request
          .put("/org", "/bill/approvalSet", {
            type: "billDateModify_approve",
            is_use: val,
          })
          .then((res) => {
            message.success(res.msg || "修改成功！");
            init();
          });
    };

    const init = () => {
      // 获取配置
      request.get("/org", "/bill/approvalGet").then((res) => {
        console.log(res);
        //账单金额调整审批
        state.adjustApprove = res?.config?.find((v) => v.type === "adjust_approve")?.is_use || 0;
        //修改日期审批
        state.billDateApprove = res?.config?.find((v) => v.type === "billDateModify_approve")?.is_use || 0;
      });
    };

    const reset = () => {
      state.activeKey = "adjust_approve";
    };

    watch(
        () => props.visible,
        (val) => {
          if (val) {
            init();
          } else {
            reset();
          }
        }
    );
    return {
      ...toRefs(state),
      haveInvoiceAuth,
      closeModal,
      changeKey,
      handleAdjustApproveChange,
      handleDateApproveChange,
    };
  },
});
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  //display: flex;

  .top {
    width: 100%;
    height: 42px;
    line-height: 42px;
    background-color: #f2f2f2;
  }

  .bottom {
    .listapproves {
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #d4d4d4;
      .switchbut{
        padding-left: 120px;
        position: relative;
        .appbut{
          display: inline-block;
          line-height: 22px;
          border-radius: 20px;
          padding: 1px 10px;
          color: #1273e5;
          border: 1px solid #1273e5;
          position: absolute;
          top: 18px;
          left: 0;
          cursor: pointer;
        }
      }
    }
  }
}

.mt-10 {
  margin-top: 10px;
}

.type-item {
  //width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  margin-left: 15px;
  margin-right: 15px;
}

.active {
  color: #1a6adb;
  font-weight: bold;
  border-bottom: 2px solid #1a6adb;
  height: 42px;
}
</style>
